<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>相片浏览页面</title>
	 <script type="text/javascript" src="${staticWebsite}js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="${staticWebsite}js/thickbox.js"></script>
     <link rel="stylesheet" href="${staticWebsite}css/common/thickbox.css" type="text/css" />
     <link rel="stylesheet" href="${staticWebsite}css/common/albumItemsList.css" type="text/css"/>
       <script type="text/javascript">
	$(document).ready(function(){
	
	   //鼠标经过相册评论关闭的事件
       	  $(".closeImg").live("mouseover",function(){
       	      $(this).attr("src","${staticWebsite}image/album/popCloseRed.jpg");
       	  });
       	  
       	   //鼠标移开相册评论关闭触发的事件
    	  $(".closeImg").live("mouseleave",function(){
    	      $(this).attr("src","${staticWebsite}image/album/popCloseGray.jpg");
    	  });  
    	  
    	   //鼠标经过相册评论关闭的事件
       	  $(".delItemsComment").live("mouseover",function(){
       	      $(this).attr("src","${staticWebsite}image/album/popCloseRed.jpg");
       	  });
       	  
       	   //鼠标移开相册评论关闭触发的事件
    	  $(".delItemsComment").live("mouseleave",function(){
    	      $(this).attr("src","${staticWebsite}image/album/popCloseGray.jpg");
    	  }); 
    	  
    	  //点击删除相册评论 
    	  $(".closeImg").live("click",function(){
    	      var thisObj=$(this);
    	      var albumCommentId=thisObj.attr("data1");
    	       $.ajax({
						type:"post",
						data:"albumCommentId="+$.trim(albumCommentId),
						url:"${website}album/album_ajax_delComment.action",
						dataType:"json",
						success:function(obj){
						    	if(obj){
						    	    alert("删除成功");
						    	    thisObj.parent().parent().parent().next().remove();
						    	    thisObj.parent().parent().parent().remove();
						    	}
						    	else{
						    	   alert("删除失败");
						    	}
							}
				});
    	  });
    	  
    	    //点击删除相片评论 
    	  $(".delItemsComment").live("click",function(){
    	      var thisObj=$(this);
    	      var albumItemsCommentId=thisObj.attr("data1");
    	       $.ajax({
						type:"post",
						data:"albumItemsCommentId="+$.trim(albumItemsCommentId),
						url:"${website}album/album_ajax_delAlbumItemsComment.action",
						dataType:"json",
						success:function(obj){
						    	if(obj){
						    	    alert("删除成功");
						    	    thisObj.parent().parent().parent().next().remove();
						    	    thisObj.parent().parent().parent().remove();
						    	}
						    	else{
						    	   alert("删除失败");
						    	}
							}
				});
    	  });
    	  
    	 //点击相册评论提交
	    $("#pinglun").click(function(){
	       var thisObj=$(this);
	       var albumId=thisObj.attr("data1");
	       var pinglunContent=$("#pinglunContent").val();
	         $.ajax({
						type:"post",
						data:"albumId="+$.trim(albumId)+"&albumCommentContent="+pinglunContent,
						url:"${website}album/album_ajax_savePinlun.action",
						dataType:"json",
						success:function(obj){
						    	if(obj){
						    	    var apDiv="<div class='contentDiv'><div style='float:left'><a href='#'>"+obj.commentUserName+"</a> "+obj.date+"</div><div style='float:right'><a href='#'><img class='closeImg' data1='"+obj.commentId+"' src='${staticWebsite}image/album/popCloseGray.jpg'/></a></div><div class='clearfloat'></div>";
						    	    apDiv+="<div>"+pinglunContent+"</div></div><br>";
						    	    thisObj.parent().parent().parent().before(apDiv);
						    	}
							}
				});
				
	    });
	    
	     //点击相片评论提交
	    $(".albumItemsComment").click(function(){
	       var thisObj=$(this);
	       var albumItemsId=thisObj.attr("data1");
	       var pinglunContent=thisObj.parent().parent().prev().val();
	         $.ajax({
						type:"post",
						data:"albumItemsId="+$.trim(albumItemsId)+"&albumItemsCommentContent="+pinglunContent,
						url:"${website}album/album_saveAlbumItemsComment.action",
						dataType:"json",
						success:function(obj){
						    	if(obj){
						    	    var apDiv="<div class='contentDiv'><div style='float:left'><a href='#'>"+obj.commentUserName+"</a> "+obj.date+"</div><div style='float:right'><a href='#'><img class='delItemsComment' data1='"+obj.commentId+"' src='${staticWebsite}image/album/popCloseGray.jpg'/></a></div><div class='clearfloat'></div>";
						    	    apDiv+="<div>"+pinglunContent+"</div></div><br>";
						    	   // alert(apDiv);
						    	    thisObj.parent().parent().parent().before(apDiv);
						    	}
							}
				});
				
	    });
	});
	</script>
</head>
<body>
<div id="divLeft">
    <div><a href="${website}album/album_toAlbum.action"><font size="10px">我的相册</font></a></div>
  <div style="margin:5px;"><a id="popLayer" onfocus="this.blur();" href="${website}upload/upload_upload_goImageUpload.action?keepThis=true&type=test&number=1&pos=imgUpload&TB_iframe=true&height=500&width=700&modal=true" class="thickbox"><img src="${staticWebsite}image/album/upload.jpg"/></a></div>
   <div><font size="5px">${album.albumName}</font></div>
   <div><a href="${website}album/album_toAlbumItems.action?albumId=${album.id}"><img src="${staticWebsite}image/album/suolie_light.jpg"/></a><a href="#"><img src="${staticWebsite}image/album/pinglun_gray.jpg"/></a></div>
  <br/>
  <div>
   <c:forEach items="${albumItemsList}" var="i">
	   <div style="float:left;width:60%;">
	       <a href=""><img src="${staticWebsite}/${i.imageURL}"/></a>
	   </div>
	   <div style="float:right;">
	  	    <c:forEach items="${albumItemsCommentMap}" var="aMap">
                <c:choose>
                    <c:when test="${aMap.key==i.id}">
                       <c:forEach items="${aMap.value}" var="m">
                           <div class="contentDiv">
					        <div style="float:left"><a href='#'>
					           <c:forEach items="${userList}" var="j">
					              <c:choose>
					                <c:when test="${j.id==m.commentUserId}">${j.realName}</c:when>
					              </c:choose>
					           </c:forEach>
					        </a></div>
					        ${m.commentDate}
					        <div style="float:right"><a href="#"><img class="delItemsComment" data1="${m.id}" src="${staticWebsite}image/album/popCloseGray.jpg"/></a></div>
					        <div>${m.commentContent}</div>
					        </div></br>
                       </c:forEach>
                    </c:when>
                </c:choose>
              </c:forEach>
                <div>
			     <textarea rows="2" cols="30" class="albumItemsCommentContent"></textarea> 
			    <div><br/><a href="#"><img class="albumItemsComment" src="${staticWebsite}image/album/answerBack.jpg" data1="${i.id}"/></a></div>
	    </div>
	   </div>
	   <div class="clearfloat"></div><br/>
	</c:forEach>
		 
	</div>
  <div>
  <a href="#">评论</a>|
     <a href="">分享</a>|
     <a href="">喜欢</a>
   </div>
  <br/>
  <c:forEach items="${albumCommentList}" var="i">
      <div class="contentDiv">
        <div style="float:left"><a href='#'>
           <c:forEach items="${userList}" var="j">
              <c:choose>
                <c:when test="${j.id==i.commentUserId}">${j.realName}</c:when>
              </c:choose>
           </c:forEach>
        </a></div>
        ${i.commentDate}
        <div style="float:right"><a href="#"><img class="closeImg" data1="${i.id}" src="${staticWebsite}image/album/popCloseGray.jpg"/></a></div><div class='clearfloat'></div>
        <div>${i.commentContent}</div>
        </div></br>
  </c:forEach>

   <div>
     <textarea rows="5" cols="40" id="pinglunContent"></textarea> 
      <div><br/><a href="#"><img id="pinglun" src="${staticWebsite}image/album/pinglun.jpg" data1="${album.id}"/></a><input type="checkbox" value="1"/>悄悄话</div>
   </div>
 </div>
 <div id="divRight">我的相册</div>
</body>
</html>
